<!-- 报错提示弹窗 -->
<template>
  <Dialog
    v-model="visibleDialog"
    title="报错提示"
    width="30%"
    class="valid-dialog-class"
    modal-class="valid-dialog-class-modal"
    draggable
    append-to-body
    :modal="false"
    :close-on-click-modal="false"
    @close="visibleDialog = false"
  >
    <div class="valid-dialog-content">
      <p style="color: red" v-for="(item, index) in msg" :key="index">
        {{ index + 1 }}. {{ item }}
      </p>
    </div>
  </Dialog>
</template>

<script lang="ts" setup name="ValidErrorDialog">
  import { ref } from 'vue'

  const msg = ref<string[]>([])
  const visibleDialog = ref(false)
  const openDialog = (msgInfo: string[]) => {
    if (msgInfo.length > 0) {
      msg.value = msgInfo
      visibleDialog.value = true
    } else {
      visibleDialog.value = false
    }
  }
  defineExpose({
    openDialog
  })
</script>

<style lang="scss" scoped>
  .valid-dialog-content {
    max-height: 300px;
    overflow-y: auto;
  }
</style>
<style lang="scss">
  .valid-dialog-class-modal {
    pointer-events: none;
    .valid-dialog-class {
      pointer-events: auto;
    }
  }
</style>
